import React from 'react';
import { Button, Tag } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, RightOutlined, DownOutlined } from '@ant-design/icons';


const CategoryTreeItem = ({
  category,
  expandedKeys,
  onToggleExpand,
  onAddSubCategory,
  onEditCategory,
  onDeleteCategory,
  onViewCategoryBooks,
  getStatusType,
}) => {
  const isExpanded = expandedKeys.includes(category.id);
  const hasChildren = category.children && category.children.length > 0;

  return (
    <div className={`category-item category-level-${category.level}`}>
      <div className="category-header">
        <div className="category-main">
          {hasChildren ? (
            <Button
              type="text"
              icon={isExpanded ? <DownOutlined /> : <RightOutlined />}
             
              onClick={() => onToggleExpand(category)}
              size="small"
            />
          ) : (
            <span className="expand-placeholder"></span> // Placeholder for alignment
          )}
          <span className="category-name" onClick={() => onViewCategoryBooks(category)}>
            {category.name}（{category.bookCount}本）
          </span>
          <Tag size="small" color={getStatusType(category.status)}>
            {category.status === 'active' ? '活跃' : '禁用'}
          </Tag>
        </div>
        <div className="category-actions">
          <Button size="small" type="success" onClick={() => onAddSubCategory(category)} icon={<PlusOutlined />} />
          <Button size="small" type="primary" onClick={() => onEditCategory(category)} icon={<EditOutlined />} />
          <Button size="small" type="danger" onClick={() => onDeleteCategory(category)} icon={<DeleteOutlined />} />
        </div>
      </div>

      {isExpanded && hasChildren && (
        <div className={`category-children level-${category.level + 1}`}>
          {category.children.map((child) => (
            <CategoryTreeItem
              key={child.id}
              category={child}
              expandedKeys={expandedKeys}
              onToggleExpand={onToggleExpand}
              onAddSubCategory={onAddSubCategory}
              onEditCategory={onEditCategory}
              onDeleteCategory={onDeleteCategory}
              onViewCategoryBooks={onViewCategoryBooks}
              getStatusType={getStatusType}
            />
          ))}
        </div>
      )}
    </div>
  );
};

export default CategoryTreeItem;